<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医院预约系统注册</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <!--    <link rel="stylesheet" href="/css/feng.css">-->
    <style type="text/css">
        .login {
            height: 395px;
            width: 434px;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            z-index: 99;
        }

        a {
            width: 190px;
            margin: auto;
        }

        .carousel {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 90;
            background-color: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div class="layui-carousel carousel" id="carousel" lay-filter="carousel">
    <div carousel-item="">
        <div><img src="/images/background1.png"></div>
        <div><img src="/images/background2.png"></div>
    </div>

    <div class="layui-container login">
        <div style="padding: 10px"><h1 style="color: #FFFFFF">医院预约系统注册</h1></div>
        <form class="layui-form" id="loginForm" layui-formpane>
            <select name="type">
                <option value="1">学生</option>
                <option value="2">宿管</option>
            </select>
            <br>
            <input autocomplete="off" class="layui-input" lay-verify="required" name="username"
                   placeholder="请输入工号/学号" type="text">
            <br>
            <input autocomplete="off" class="layui-input" lay-verify="required" name="name"
                   placeholder="请输入姓名" type="text">
            <br>
            <input autocomplete="off" class="layui-input" lay-verify="required" name="password"
                   placeholder="请输入密码" type="password">
            <br>
            <input autocomplete="off" class="layui-input" lay-verify="required" name="repassword"
                   placeholder="确认密码" type="password">
            <br>
            <a class="layui-btn layui-btn-normal" id="submit" lay-filter="submit" lay-submit="">注册</a>
            <a class="layui-btn layui-btn-warm" href="/index/login">登录</a>
        </form>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
    layui.use(['layer', 'form', 'jquery', 'carousel'],
        function () {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var carousel = layui.carousel; // 轮播图
            form.on('submit(submit)', function (data) {
                if (data.field.username.length !== 7) {
                    layer.msg("用户名必须是7位")
                    return
                }
                if (data.field.password !== data.field.repassword) {
                    layer.msg("两次输入密码不一致！！")
                    return
                }
                $.ajax({
                    "url": "/elective/user/register",
                    "method": "POST",
                    "data": JSON.stringify(data.field),
                    "contentType": 'application/json; charset=UTF-8',
                    "dataType": "json",
                    success: function (res) {
                        layer.msg(res.msg);
                        if (res.code === 200) {
                            window.location.href = "/index/login";
                        }
                    }
                });
            });

            //改变下时间间隔、动画类型、高度
            carousel.render({
                elem: '#carousel'
                , interval: 2000
                , anim: 'fade'
                , full: true //全屏
                , width: '100%'
                , arrow: 'none'
            });
        }
    );
</script>
</body>
</html>
